<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <h1>
          <a href="javascript:void(0)">
            <img class="login-img" src="../../assets/logo1.jpg">
          </a>
        </h1>
      </div>
      <div class="login-body">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="登录" name="first">
            <user-login :initFormData="initFormData"/>
          </el-tab-pane>
          <el-tab-pane label="注册" name="second">
            <user-signin @changActive="changeActiveName"
                         :initFormData="initFormData"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="login-footer">
      <div v-if="activeName ==='first'">
        <p>
          <a class="forget">忘记密码？</a>
        </p>
        <p>还没有墨刀帐号？
          <a class="text-highlight signup-btn" 
          @click="changeActiveName('second')">点我注册</a>
        </p>
      </div>
      <div v-else>
        <p class="agree-terms">
          点击「免费注册」按钮，将视为您同意彩云拍
          <a style="text-decoration:underline;"><router-link to="/UserRule">使用条款</router-link></a>
        </p>
      </div>
      <div id="quick-login" class="quick-login">
        <p class="hr">
          <span v-if="activeName === 'first'">快捷登录</span>
          <span v-else>快捷注册</span>
        </p>
        <a id="social">
          <i class="iconfont fa-wechat">&#xe65c;</i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import SocialSignin from './components/SocialSignin'
import UserSignin from './components/UserSignin'
import UserLogin from './components/UserLogin'
import axios from 'axios'

export default {
  name: 'Login',
  components: { UserSignin, UserLogin, SocialSignin },
  data() {
    return {
      initFormData: {
        password: '',
        email:'',
        username:''
      },
      activeName: 'second'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
      this.initData()
    },
    getHomeInfo(){
    axios.get('/api/index.json')
         .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){
      console.log(res)
    },
    changeActiveName(activeName){
      console.log("active=>",activeName)
      this.activeName = activeName
    },
    initData(){
      console.log("initData");
     this.initFormData.password ='',
     this.initFormData.email ='',
     this.initFormData.username=''
    }
  },
  mounted(){
    this.getHomeInfo()
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  .login-box {
    width: 300px;
    margin: auto;
    .login-header {
      padding-top: 40px;
      h1 {
        margin: 0px !important;
        padding: 0px !important;
      }
      .login-img {
        width: 250px;
        height: 90px;
      }
    }
  }
}
</style>
